<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS现代布局——弹性盒子</title>
    <link rel="stylesheet" href="../styles/normalize.css">
    <link rel="stylesheet" href="./styles/css16_layout_flexbox.css">
</head>

<body>
    <div class="flex_demo1">
        <header>
            <h2>弹性盒子示例1</h2>
        </header>
        <section>
            <article>
                <h3>文章1</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章2</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章3</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
        </section>
    </div>

    <div class="flex_demo2">
        <header>
            <h2>弹性盒子示例2</h2>
        </header>
        <section>
            <article>
                <h3>文章1</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章2</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章3</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章4</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章5</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章6</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章7</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章8</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章9</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章10</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
        </section>
    </div>

    <div class="flex_demo3">
        <header>
            <h2>弹性盒子示例3</h2>
        </header>
        <section>
            <article>
                <h3>文章1</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章2</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
            <article>
                <h3>文章3</h3>
                <p>段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
                </p>
            </article>
        </section>
    </div>   
    
    <div class="flex_demo4">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>

    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
</body>

</html>